import React,{ useState,useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import '../../../scss/fan/login.scss'
import { Manager,Lock } from '@react-vant/icons';
import Slid from '../login/slider'

import { Flex, Image } from 'react-vant'
import { Button, Input, Form, Uploader, Toast } from 'react-vant';
import { Modal } from 'antd';
import axios from 'axios';
export default function login() {

  let navigate = useNavigate()
  const [values, setValues] = useState()

  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
const handlog=()=>{
  login()
}

  //防抖
  function debounce(func, delay) {
    let timer;
    return function() {
     clearTimeout(timer);
     timer = setTimeout(() => {
       func.apply(this, arguments);
     }, delay);
  };
  }
    
  function handleDebounce(e) {
    setSrc('')
   axios.post('http://localhost:3000/users/loginimg',{user:e}).then(res=>{
      console.log(res);
      setSrc(res.data.data)

   })
  }
    
  const debouncedFunc = debounce(handleDebounce, 1000);

 

  const [src, setSrc] = useState('')
  const [form] = Form.useForm()
  //登录按钮
  const onFinish = async (values) => {
    showModal()
    setValues(values)
  }
  let login=()=>{
    axios.post('http://localhost:3000/users/login',{user:values.username,pwd:values.password}).then(res=>{
      if(res.data.code==200){
        localStorage.setItem('accessToken', JSON.stringify(res.data.accessToken))
        localStorage.setItem('user', JSON.stringify(res.data.data))
        Toast('登录成功')
        navigate('/')
      }else{
        Toast.fail('账号或密码错误')
      }
    })
  }



  return (
    <div className='login'>
      <div className='top-img'>
        <Flex wrap='wrap' gutter={20}>
          <Flex.Item span={8}>
            <Image round fit='cover' width='100%' height='10rem' src={src} />
          </Flex.Item>
        </Flex>
      </div>
      <div className='form'>
        
        <Form
          form={form}
          onFinish={onFinish}
          footer={
            <div style={{ margin: '16px 16px 0' }}>
              <Button round nativeType='submit' type='primary' block>
                登录
              </Button>
            </div>
          }
        >
          <Form.Item
            tooltip={{
              message:
                '用户名由字母、数字、下划线组成，长度在6~18之间',
            }}
            rules={[{ required: true, message: '请填写用户名' }]}
            name='username'
          >
          <Input
            prefix= {<Manager  />}
            onChange={(e)=>debouncedFunc(e) }
            placeholder="请输入短信验证码"
          />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请填写密码' }]}
            name='password'
          >
          <Input
          prefix= {<Lock  />}
          type='password'
          placeholder='请输入密码'
          />
          </Form.Item>
        </Form>
      </div>

      <Modal title="验证码" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
           <Slid onshow={handleCancel} onlogin={handlog}></Slid>
      </Modal>

    </div>
  )
}
